<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>终端监控平台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" th:href="@{/vendor/font-awesome/css/font-awesome.css}">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" th:href="@{/css/fontastic.css}">
    <!-- Google fonts - Roboto -->
    <!--<link rel="stylesheet" th:href="@{https://fonts.googleapis.com/css?family=Roboto:300,400,500,700}">-->
    <!-- jQuery Circle-->
    <link rel="stylesheet" th:href="@{/css/grasp_mobile_progress_circle-1.0.0.min.css}">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" th:href="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css}">
    <!-- theme stylesheet-->
    <link rel="stylesheet" th:href="@{/css/style.blue.css}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" th:href="@{/css/custom.css}">
    <!--toastr-->
    <link rel="stylesheet" th:href="@{/css/toastr.css}">
    <!-- Favicon-->
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}">
    <link rel="stylesheet" th:href="@{/css/zTree/zTreeStyle/bootstrapStyle.css}" type="text/css">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>
<style>
    input.error {
        border: 1px solid red;
    }

    label.error {
        font-weight: bold;
        color: red;
    }

</style>
<!-- JavaScript files-->
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/vendor/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/js/grasp_mobile_progress_circle-1.0.0.min.js}"></script>
<script th:src="@{/vendor/jquery.cookie/jquery.cookie.js}"></script>
<script th:src="@{/vendor/chart.js/Chart.min.js}"></script>
<script th:src="@{/vendor/jquery-validation/jquery.validate.min.js}"></script>
<script th:src="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{/js/charts-home.js}"></script>
<!-- Main File-->
<script th:src="@{/js/front.js}"></script>
<script th:src="@{/js/toastr.min.js}"></script>
<script th:src="@{/js/base.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.exedit.js}"></script>
<body>
<!-- Side Navbar -->
<div th:replace="~{/pages/common/side_navbar.html}"></div>

<div class="page">
    <!-- navbar-->
    <div th:replace="~{/pages/common/header_navbar.html}"></div>
    <!-- Breadcrumb-->
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">角色管理</a></li>
                <li class="breadcrumb-item active">角色用户关联</li>
            </ul>
        </div>
    </div>
    <!--新增用户div start -->
    <section class="forms">
        <div class="container-fluid">
            <div class="col-lg-12 mt-3">
                <div class="card">
                    <div class="card-header d-flex align-items-center" th:if="${null == role.id}">
                        <h4>新增</h4>
                    </div>
                    <div class="card-header d-flex align-items-center" th:if="${null != role.id}">
                        <h4>编辑</h4>
                    </div>

                    <!--数据字段-->
                    <div class="card-body">
                        <form class="form-horizontal" method="post">
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">角色名称 <em style="color: red;">*</em></label>
                                <div class="col-sm-4">
                                    <input type="hidden" th:value="${role.id}" name="id" id="roleId"/>
                                    <input type="text" placeholder="" th:value="${role.roleName}" readonly
                                           name="roleName" id="roleName" class="form-control"/>
                                    <input type="hidden" th:value="${orgList}" name="orgList" id="orgList"/>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="row form-group">
                                <label class="col-sm-2 form-control-label">用户 <em style="color: red;">*</em></label>
                                <div class="col-sm-4">
                                    <ul id="treeDemo" class="ztree"></ul>
                                </div>
                            </div>

                            <div class="line"></div>
                            <div class="form-group row">
                                <div class="col-sm-4 offset-sm-2">
                                    <input type="hidden" th:value="${url}" id="url">
                                    <a th:href="${url}" class="btn btn-secondary ml-1">返回</a>
                                    <button type="button" class="btn btn-success ml-5 " id="saveMeunRole">提交</button>
                                </div>
                                <!-- <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"
                                        th:if="${_csrf}"/>-->
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!--新增用户div end -->
</div>
<!-- Modal -->
<div class="modal fade" id="modalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">清空用户</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body ">
                <input value="" class="del_role_id" type="hidden">
                <p class="del_message"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary delSure" data-dismiss="modal" id="okBtn"> 确定</button>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    //表单验证
    $(function () {
        toastr.options = {
            closeButton: false, //是否显示关闭按钮（提示框右上角关闭按钮）；
            debug: false, //是否为调试；
            progressBar: false, //是否显示进度条（设置关闭的超时时间进度条）
            positionClass: "toast-top-center", //消息框在页面显示的位置
            onclick: null, //点击消息框自定义事件
            showDuration: "300", //显示动作时间
            hideDuration: "1000", //隐藏动作时间
            timeOut: "2000", //自动关闭超时时间
            extendedTimeOut: "1000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };
        var setting = {
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: {"Y": "", "N": ""}
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: zTreeOnCheck
            }
        };
        var code;

        function setCheck() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                py = $("#py").attr("checked") ? "p" : "",
                sy = $("#sy").attr("checked") ? "s" : "",
                pn = $("#pn").attr("checked") ? "p" : "",
                sn = $("#sn").attr("checked") ? "s" : "",
                type = {"Y": 's', "N": 'ps'};
            zTree.setting.check.chkboxType = type;
            showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
        }

        function showCode(str) {
            if (!code) code = $("#code");
            code.empty();
            code.append("<li>" + str + "</li>");
        }

        var nodesStr = $("#orgList").val();
        var zNodes = JSON.parse(nodesStr);
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getCheckedNodes(true);
        for (var i = 0; i < nodes.length; i++) {
            checkedParentNode(nodes[i]);
        }
        //判断父节点是否选中

        setCheck();
        $("#py").bind("change", setCheck);
        $("#sy").bind("change", setCheck);
        $("#pn").bind("change", setCheck);
        $("#sn").bind("change", setCheck);

        //点击节点
        function zTreeOnCheck(event, treeId, treeNode) {
            debugger;
            if (!treeNode.checked) {//当前节点取消勾选并且选中节点非父节点
                cancelParentNodeChecked(treeNode);
            } else {//当前节点选中判断父节点是否需要选中
                checkedParentNode(treeNode);
            }
        };

        //递归选中父节点
        function checkedParentNode(treeNode) {
            zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var parentNode = treeNode.getParentNode();
            if (parentNode != null) {
                var nodes = parentNode.children;
                var flag = true;
                for (var i = 0; i < nodes.length; i++) {
                    if (!nodes[i].checked) {
                        flag = false;
                        break;
                    }
                }
                if (flag) {
                    zTree.checkNode(parentNode, true, false, false);
                    checkedParentNode(parentNode);
                }
            }
        }

        //递归去除父类节点的的选中
        function cancelParentNodeChecked(node) {
            zTree = $.fn.zTree.getZTreeObj("treeDemo");
            if (node.getParentNode()) {
                zTree.checkNode(node.getParentNode(), false, false);
                cancelParentNodeChecked(node.getParentNode());
            }
        }

        //清空角色下用户
        $("#okBtn").click(function () {
            var roleId = $("#roleId").val();
            $.ajax({
                //请求方式
                type: "GET",
                //请求地址
                url: $appName + "/sys/role/clearUserRole?roleId=" + roleId,
                /*  beforeSend : function(xhr) {
                      xhr.setRequestHeader(header, token);
                  },*/
                success: function (result) {
                    if (result.success) {
                        toastr.success(result.msg);
                        setTimeout(function () {
                                window.location.href = $("#url").val();
                            },
                            2000
                        )
                    } else {
                        toastr.success(result.msg);
                    }
                }
            })
        })
        //保存方法
        $("#saveMeunRole").click(function () {
            debugger;
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = treeObj.getCheckedNodes(true);
            var ids = "";
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].type == "user") {
                    ids += nodes[i].id + ",";
                }
            }
            debugger;
            if (ids == "") {
                $(".del_message").text("确认清空该角色" + $("#roleName").val() + "下所有用户?");
                $("#modalCenter").modal("show");
                return false;
            }

            var roleId = $("#roleId").val();
            console.log(roleId)
            $.ajax({
                //请求方式
                type: "GET",
                //请求地址
                url: $appName + "/sys/role/saveUserRole?userIds=" + ids + "&roleId=" + roleId,
                /*  beforeSend : function(xhr) {
                      xhr.setRequestHeader(header, token);
                  },*/
                success: function (result) {
                    if (result.success) {
                        toastr.success(result.msg);
                        setTimeout(function () {
                                window.location.href = $("#url").val();
                            },
                            2000
                        )
                    } else {
                        toastr.success(result.msg);
                    }
                }
            })
        })
    })


</script>

</html>